<template>
    <uni-row>
        <uni-swiper-dot :info="info" :current="current" mode="default" :dots-styles="dotsStyles" field="content">
            <swiper class="swiper-box" @change="change" autoplay="true">
                <swiper-item v-for="(item ,index) in info" :key="index">
                    <view class="swiper-item">
                        <img :src="item.url">
                    </view>
                </swiper-item>
            </swiper>
        </uni-swiper-dot>
    </uni-row>
</template>

<script>
import UniCol from "../uni_modules/uni-row/components/uni-col/uni-col";
import UniRow from "../uni_modules/uni-row/components/uni-row/uni-row";

export default {
    name: "swiper",
    components: {UniCol, UniRow},
    data() {
        return {
            current: 0,
            info: [],
            dotsStyles: {
                bottom: 40
            }
        }
    },
    methods: {
        change(e) {
            this.current = e.detail.current;
        },
    },
    beforeMount() {
        this.$http.get(
            this.$api.getAdvert.url,
        ).then(
            response => {
                if (response.code === 200 && response.data != null) {
                    let infoArr = [];
                    response.data.forEach((item) => {
                        let arrItem = {
                            url: item.advertPath,
                            advertName: item.advertisingName
                        };
                        infoArr.push(arrItem);
                    });
                    this.info = infoArr;
                }
            }
        ).catch(
            error => {
                console.error("Advert/GetAdvert 接口错误 =>>", error);
            }
        );
    }
}
</script>

<style lang="less" scoped>
.swiper-box {
    height: 502rpx;
}

.swiper-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background: #dcf8fd;
    color: #fff;
}

.swiper-item > img {
    width: 100%;
    height: 100%;
}
</style>